import { Button } from 'antd'
import { useState, useEffect, useCallback } from 'react'

function Closuretrap() {
  const [count, setCount] = useState(0)

  // 如果版本是 v17 这是一个有问题的自定义钩子
  const handleClick = useCallback(() => {
    console.log(count) // 第一次是 0 如果 count 改变，handleClick 会保留旧值
  }, [count])

  useEffect(() => {
    setTimeout(() => {
      setCount(count + 1)
    }, 1000)
  }, [])

  return <Button onClick={handleClick}>点击计数</Button>
}
export default Closuretrap

const hook = () => {
  let num = 0
  const effect = () => {
    num += 1
    const message = `现在的 num 是 ${num}`
    console.log('message', message)
    return function umount() {
      console.log(message)
    }
  }
  return effect
}
const add = hook()
const umount = add() // 1
add() // 2
add() // 3
add() // 4
add() // 5
umount() // 1 因为作用域问题，取到第一个
